<template>
  <div id="main">
    <!-- 搜索栏 -->
    <div class="headBox greenBG padding-ho">
      <div class="msgBox">
        <span class="miniFont white-light"
              @click="jumpWhere(`/pages/weatherDetail/weatherDetail`)"
              v-if="weatherInfo.temperature">现在{{weatherInfo.temperature}}℃ {{weatherInfo.weather}}
          <rich-text :nodes="weatherIcon"></rich-text>
        </span>
        <span class="miniFont white-light"
              v-if="trafficInfo.evaluation">附近 {{trafficInfo.evaluation.description}}
          <i class="alifont white-light"
             v-if="trafficInfo.evaluation.status==0">&#xe833;</i>
          <i class="alifont white-light"
             v-if="trafficInfo.evaluation.status==1">&#xe852;</i>
          <i class="alifont white-light"
             v-if="trafficInfo.evaluation.status==2">&#xe7f9;</i>
          <i class="alifont white-light"
             v-if="trafficInfo.evaluation.status==3">&#xe7df;</i>
        </span>
      </div>
      <div class="inputBox whiteBG">
        <div class="iconOne">
          <div>
            <div class="blueR"></div>
          </div>
          <div>
            <div class="orangeR"></div>
          </div>
        </div>
        <div class="input">
          <div class="bottom-white-light">
            <span class="miniFont gray">City</span>
            <input type="text"
                   placeholder="填入搜索城市"
                   disabled
                   value="中山">
          </div>
          <div>
            <span class="miniFont gray">Line</span>
            <input type="text"
                   v-model="inputName"
                   @confirm="selectLine"
                   placeholder="填入搜索路线">
          </div>
        </div>
        <button class="iconTwo gray-light2BG"
                @click="selectLine">
          <i class="alifont gray-drak">&#xe7e4;</i>
        </button>
      </div>
    </div>
    <!-- 信息显示 -->
    <div class="bodyBox whiteBG padding-ho">
      <!-- 收藏路线 -->
      <scroll-view scroll-x>
        <div class="collBox">
          <div class="collBus border-white-light action blueBG"
               v-for="(item, index) in Like"
               :key="index"
               @click="jump(item,'like')">
            <div>
              <i class="alifont gray-drak">&#xe7e4;</i>
            </div>
            <div>
              <span class="miniFont gray-drak">{{item.routeName}}</span>
              <span class="miniFont gray-drak">{{item.startStation}}-{{item.endStation}}</span>
            </div>
          </div>
        </div>
      </scroll-view>
      <!-- 查询路线信息 -->
      <div class="busBox">
        <div class="bus border-gray-light"
             v-for="(item, index) in LineArr"
             :key="index"
             @click="jump(item)">
          <div class="name blue-drak">{{item.routeName}}</div>
          <div class="place oneLine-hidden">
            <i class="alifont yellow">&#xe832;</i>
            <span class="blue-drak">{{item.startStation}}</span>
            <i class="alifont gray">&#xe7db;</i>
            <i class="alifont blue">&#xe832;</i>
            <span class="blue-drak oneLine-hidden">{{item.endStation}}</span>
          </div>
          <div class="price">
            <i class="alifont green-drak">&#xe840;</i>
            <span class="green-drak">￥1</span>
          </div>
        </div>
      </div>
      <!-- 提示 -->
      <div class="tipNot">
        <span class="gray-light miniFont">{{tip}}</span>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      LineArr: {},
      inputName: '',
      weatherInfo: {},
      trafficInfo: {},
      Like: [],
      tip: '查一查呗',
    }
  },
  async onLoad () {
    this.getLocation();
    this.selectLine();
    this.getLike();
    uni.setStorageSync('storage_key', 'hello');
  },
  methods: {
    // 获取收藏缓存
    getLike () {
      let storage = uni.getStorageSync('zhongshanLike');
      console.log('zhongshanLike', storage);
      this.Like = storage;
    },
    // 
    jumpWhere (url) {
      uni.navigateTo({
        url
      });
    },
    // 查询实时线路
    jump (item, like) {
      console.log(item);
      if (like == 'like') {
        item.like = true
      }
      let str = '';
      for (const key in item) {
        str += `${key}=${item[key]}&`
      }
      str = str.substr(0, str.length - 1)
      uni.navigateTo({
        url: `/pages/LineDetail/LineDetail?${str}`
      });
    },
    // 查找线路
    async selectLine () {
      if (this.inputName == '') return;
      uni.showLoading({
        title: '加载中'
      });
      wx.cloud.callFunction({
        name: 'http',
        data: {
          url: `https://zhongshan.yg84.com/api/basesearch/client/clientSearch.action?key=1&count=3&v=3.1.8&src=webapp_zhongshan&userId=browser_1569163431965&h5Id=browser_1569163431965&sign=1&cityId=021`
        },
      }).then(res => {
        console.log(res)
        // if (res.result.routes) {
        //   this.LineArr = res.result.routes;
        // } else {
        //   this.LineArr = [];
        //   this.tip = res.result.resultMsg;
        // }
        uni.hideLoading();
      }).catch((err) => {
        console.log(err)
        uni.showToast({
          title: err.toString(),
          icon: "none",
          duration: 2000
        });
      })
    },
    // 获得定位
    async getLocation () {
      let [error, location] = await uni.getLocation({
        type: 'wgs84',
      });
      this.$store.state.location = location
      this.getCityInfo(location);
      this.getTrafficInfo(location);
      console.log('location', this.$store.state.location);
    },
    // 获得所在城市信息
    async getCityInfo (location) {
      let locationNow = `${location.longitude},${location.latitude}`
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/geocode/regeo?key=${this.$store.state.amapWebKey}&location=${locationNow}&extensions=base&batch=false&roadlevel=1`
      });
      this.$store.state.cityInfo = res.data.regeocode
      this.getWeatherInfo()
      console.log('cityInfo', this.$store.state.cityInfo);
    },
    // 获得所在城市天气状态
    async getWeatherInfo () {
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/weather/weatherInfo?city=${this.$store.state.cityInfo.addressComponent.adcode}&key=${this.$store.state.amapWebKey}`
      });
      this.$store.state.weatherInfo = res.data.lives[0]
      this.weatherInfo = res.data.lives[0]
      console.log('weatherInfo', this.$store.state.weatherInfo);
    },
    // 获得用户附近交通状态
    async getTrafficInfo (location) {
      let locationNow = `${location.longitude},${location.latitude}`
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/traffic/status/circle?key=${this.$store.state.amapWebKey}&location=${locationNow}&radius=1000`
      });
      this.$store.state.trafficInfo = res.data.trafficinfo
      this.trafficInfo = res.data.trafficinfo
      console.log('trafficInfo', this.$store.state.trafficInfo);
    },
  },
  computed: {
    weatherIcon () {
      let icon = '<i class="alifont white-light">',
        val = this.weatherInfo.weather;
      if (val == '晴') icon += '&#xe689;'
      else if (val == '阴') icon += '&#xe68c;';
      else if (val == '多云' || val == '晴间多云') icon += '&#xe68b;';
      else if (val == '少云') icon += '&#xe68a;';
      else if (val == '小雨') icon += '&#xe68d;';
      else if (val == '中雨') icon += '&#xe68e;';
      else if (val == '大雨') icon += '&#xe68f;';
      else if (val == '暴雨' || val == '大暴雨' || val == '特大暴雨' || val == '极端降雨') icon += '&#xe690;';
      else if (val == '阵雨' || val == '强阵雨') icon += '&#xe692;';
      else if (val == '雷阵雨' || val == '强雷阵雨' || val == '雷阵雨并伴有冰雹') icon += '&#xe693;';
      else icon += '&#xe68a;'
      icon += `</i>`;
      // console.log(val, icon);
      return icon;
    }
  },
}
</script>

<style lang="less" scoped>
#main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.plaeseLike {
  position: absolute;
  padding: 28rpx 40rpx;
  padding-top: 30rpx;
  border-radius: 16rpx;
  transition: all 0.3s;
  .triangle {
    position: absolute;
    top: -30rpx;
    width: 0;
    height: 0;
    border-width: 30rpx;
    border-top-width: 0;
    border-style: solid;
    border-color: transparent transparent #303133 transparent;
  }
  .close {
    position: absolute;
    right: 14rpx;
    top: 6rpx;
    font-size: 32rpx;
    line-height: 30rpx;
  }
  .detail {
    display: block;
    font-size: 26rpx;
    text-align: center;
  }
}
.statusBarHeight {
  padding-right: 230rpx;
  border: 1rpx solid #44c07a;
  swiper {
    height: 100%;
    width: 100%;
  }
  .swiper-item {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .he {
      height: 50rpx;
      line-height: 50rpx;
    }
    rich-text {
      .he;
    }
    span {
      display: block;
      width: 100%;
      font-size: 30rpx;
      font-weight: bold;
      .he;
    }
  }
  .wMsg {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .he {
      height: 50rpx;
      line-height: 50rpx;
    }
    span {
      font-size: 30rpx;
      font-weight: bold;
    }
    i {
      padding-bottom: 6rpx;
    }
  }
}
.headBox {
  padding-bottom: 150rpx;
  border: 1rpx solid #44c07a;
  flex-shrink: 0;
  .msgBox {
    display: flex;
    justify-content: space-between;
    margin: 0 0 30rpx;
    padding-top: 10rpx;
    .he {
      height: 50rpx;
    }
    rich-text {
      .he;
    }
    span {
      display: flex;
      align-items: center;
    }
    i {
      margin-left: 4rpx;
    }
  }
  .inputBox {
    padding: 26rpx 40rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.11);
    .input {
      flex-grow: 1;
      & > div {
        padding: 10rpx 0;
      }
      input {
        width: 100%;
        margin: 6rpx 0;
        font-weight: bold;
      }
    }
    .iconOne {
      flex-shrink: 0;
      margin-right: 20rpx;
      align-self: stretch;
      & > div {
        height: 50%;
        padding-top: 22rpx;
        & > div {
          height: 50%;
          border-radius: 100%;
          @R: 32rpx;
          height: @R;
          width: @R;
          border: 8rpx solid #ffffff;
        }
        .blueR {
          border-color: #09acfe;
          background-color: #dbf3ff;
        }
        .orangeR {
          border-color: #f9650c;
          background-color: #fee0ce;
        }
      }
    }
    .iconTwo {
      margin-left: 20rpx;
      flex-shrink: 0;
      border-radius: 14rpx;
      padding: 14rpx;
    }
  }
}
.bodyBox {
  margin-top: -80rpx;
  border-radius: 80rpx 80rpx 0 0;
  min-height: 200rpx;
  box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.11);
  padding-top: 60rpx;
  flex-grow: 1;
  scroll-view {
    width: 100%;
  }
  .collBox {
    display: flex;
    padding-bottom: 50rpx;
    .collBus {
      flex-shrink: 0;
      display: flex;
      margin-right: 24rpx;
      border-radius: 20rpx;
      padding: 20rpx;
      & > div {
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
      & > div:first-child {
        margin-right: 8rpx;
      }
      .alifont {
        font-size: 40rpx;
        height: 40rpx;
      }
      .miniFont {
        font-size: 24rpx;
      }
    }
    .action {
      box-shadow: 0rpx 6rpx 24rpx rgba(9, 172, 254, 0.314);
      .gray-drak {
        color: #ffffff;
      }
      i {
        font-weight: lighter;
      }
    }
  }
  .busBox {
    display: flex;
    flex-direction: column;
    .bus {
      border-radius: 30rpx;
      padding: 20rpx 26rpx;
      height: 110rpx;
      display: flex;
      align-items: flex-end;
      position: relative;
      margin-bottom: 26rpx;
      .name {
        align-self: center;
        font-weight: bolder;
        flex-shrink: 0;
        font-size: 44rpx;
        width: 180rpx;
      }
      .place {
        flex-grow: 1;
        display: flex;
        align-items: center;
        span {
          font-size: 28rpx;
        }
        i {
          font-size: 32rpx;
          height: 32rpx;
          flex-shrink: 0;
        }
      }
      .price {
        position: absolute;
        right: 26rpx;
        top: 14rpx;
        display: flex;
        align-items: center;
        i {
          font-size: 34rpx;
          height: 34rpx;
        }
        span {
          transform: translateY(2rpx);
          height: 30rpx;
          line-height: 30rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  .tipNot {
    display: flex;
    justify-content: center;
    padding: 30rpx 0;
    span {
      letter-spacing: 4rpx;
      text-indent: 4rpx;
    }
  }
}
</style>
